<script setup>
import { inject, ref } from "vue";
//引入VueOfficeDocx组件
import VueOfficeDocx from "@vue-office/docx";
//引入相关样式
import "@vue-office/docx/lib/index.css";

const loading = ref(true);
const index = inject("index");

const renderedHandler = () => {
    console.log("渲染完成");
    loading.value = false;
};

const errorHandler = () => {
    console.log("渲染失败");
};
</script>

<template>
    <div class="w-11/12 mx-auto">
        <div
            class="flex flex-col min-h-screen rounded-lg my-14 overflow-hidden relative"
        >
            <div class="sticky top-14 left-0">
                <p
                    class="h-10 leading-10 text-center bg-iso-gray-500 bg-opacity-50 relative"
                >
                    <template v-if="loading">
                        <span class="text-white text-sm"> 加载中... </span>
                    </template>
                    <template v-else>
                        <span class="text-iso-blue-600" @click="index = 4">
                            用户协议
                        </span>
                        <span class="text-white"> / </span>
                        <span class="text-white">隐私政策</span>
                    </template>
                    <span
                        class="absolute right-5 top-2.5 text-white cursor-pointer"
                        @click="index = 0"
                    >
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke-width="1.5"
                            stroke="currentColor"
                            class="size-5"
                        >
                            <path
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                d="M6 18 18 6M6 6l12 12"
                            />
                        </svg>
                    </span>
                </p>
                <vue-office-docx
                    src="/privacy.docx"
                    style="height: 100vh"
                    @rendered="renderedHandler"
                    @error="errorHandler"
                />
            </div>
        </div>
    </div>
</template>
